:root{
  --is-squre: 1;
  --FPcard-width:calc(var(--is-squre) * 14vw + (1 - var(--is-squre)) * 9vw);
  --FPcard-ph-fontsize:calc(var(--is-squre) * 2em + (1 - var(--is-squre)) * 1.5em);
  --FPcard-ps-fontsize:calc(var(--is-squre) * 2em + (1 - var(--is-squre)) * 1.2em);
  --FPcard-exp-fontsize:calc(var(--is-squre) * 1.15em + (1 - var(--is-squre)) * 1em);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin:0;
}
#cardstack{
  padding: 3em;
  width: 90vw;
  height: 90vh;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
}
.card {
  position: relative;
  width: var(--FPcard-width);
  height: 14vw;
  background: white;
  font-family: "Times New Roman","Microsoft Yahei",SimSun,Arial, Helvetica, sans-serif;
  color:#333;
  line-height: 2vw;
  word-wrap: break-word;
  border: 0.05em solid black;
  border-radius: 0.5em;
  /* box-shadow: 0.1em 0.1em 0 0 #555; */
  box-shadow: 0 0 3px #999;
  padding: 1.5em;
  transform-style: preserve-3d;
  transition: all 0.7s ease;
}
/* .card * {
  pointer-events: none;
} */
.flipCard {
  transform: rotateY(180deg);
}
.front, .back{
  position: absolute;/* 必须absolute，不然不能重叠 */
  width: inherit;
  height: inherit;
  backface-visibility: hidden; /* Safari */
  text-align: center;
  background:white;
  color:#333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.front {
  font-size: 2em;
  font-weight: bold;
  background: rgb(250, 227, 244);
  pointer-events: none;
}
.back {
  transform: rotateY(180deg);
  overflow: auto;
}
.pronunciation{
  font-size: var(--FPcard-ph-fontsize);
  margin-bottom: 0.5em;
}
.meaning{
  margin-bottom: 0.5em;
}
.meaning_ps{
  padding-right: 0.5em;
  text-align: right;
  vertical-align: top;
  width:auto;
  font-size: var(--FPcard-ps-fontsize);
}
.meaning_exp{
  font-size: var(--FPcard-exp-fontsize);
  text-align: left;
  vertical-align: top;
  display: flex;
  flex-wrap: wrap;
}
.controlbar{
  height: 4vw;
}

.controlbar > *{
  float: right;
  margin: 1vw;
  width: 4vw;
  height: 2vw;
  border: 1px solid black;
  border-radius: 5px;
  background: white;
  color:#333;
  box-shadow: 0.1em 0.1em 0 0 #555;
}
.controlbar > *:hover{
  background: #888;
  color:white;
}
#clear:hover{
  background: rgb(255, 81, 81);
  color:white;
}

#clear .tooltiptext {
  visibility: hidden;
  width: 5em;
  height: 3em;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  left:55vw;

  z-index: 1;
  border:1px solid black;
  box-shadow: 0 0 3px #999;
}

#clear:hover .tooltiptext {
  visibility: visible;
}

.controlbar > *:active{
  background: white;
  color:#333;
  box-shadow: -0.1em -0.1em 0 0 #555;
}
.canvasbox{
  position: relative;
  overflow: hidden;
  border: 5px solid #005bb8;
  border-radius: 3em;
}
/* .grid{
  border:1px solid black;
  box-shadow: 0 0 3px #999;
} */
.mouse{
  position: absolute;
  background: #eee;
}